<!DOCTYPE html>

<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Data of Covid19</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

    <link rel="stylesheet" href="index.html">
</head>
<body>
    <h1 align="center">新冠肺炎实时数据统计</h1>
    <h2 align="center" th:text="'当前时间：'+${showtime}">当前时间</h2>
    <h1 align="center" th:text="(${country}==null?'全球':${country})+'新增病例:'+${AllLatestTotalCases}"></h1>
    <h1 align="center" th:text="(${country}==null?'全球':${country})+'当前病例:'+${ALlDiffFromPrevDay}"></h1>
    <h2 th:text="(${country}==null?'全球':${country})+'5天来新增病例数'"></h2>
    <canvas id="a_canvas" width="1000" height="700"></canvas>
<!--    <script th:inline="javascript">-->
<!--        var state =[[${day1}]];-->
<!--        alert(state+"?");-->
<!--    </script>-->
    <script>
        (function (){

            window.addEventListener("load", function(){
                var day1=[[${day1}]];
                var day2=[[${day2}]];
                var day3=[[${day3}]];
                var day4=[[${day4}]];
                var day5=[[${day5}]];
                var data = [day5,day4,day3,day2,day1];
                var xinforma = ['day1','day2','day3','day4','day5'];

                // 获取上下文
                var a_canvas = document.getElementById('a_canvas');
                var context = a_canvas.getContext("2d");


                // 绘制背景
                var gradient = context.createLinearGradient(0,0,0,300);
                context.fillStyle = gradient;

                context.fillRect(0,0,a_canvas.width,a_canvas.height);

                var realheight = a_canvas.height-15;
                var realwidth = a_canvas.width-40;
                // 描绘边框
                var grid_cols = data.length + 1;
                var cell_width = realwidth / grid_cols;
                context.lineWidth = 1;
                context.strokeStyle = "#a0a0a0";

                // 结束边框描绘
                context.beginPath();
                context.moveTo(0,realheight);
                context.lineTo(realwidth,realheight);


                //画竖线
                context.moveTo(0,20);
                context.lineTo(0,realheight);
                context.lineWidth = 1;
                context.strokeStyle = "black";
                context.stroke();


                var max_v =0;

                for(var i = 0; i<data.length; i++){
                    if (data[i] > max_v) { max_v =data[i]};
                }
                max_v = max_v * 1.1;
                // 将数据换算为坐标
                var points = [];
                for( var i=0; i < data.length; i++){
                    var v= data[i];
                    var px = cell_width *　(i +1);
                    var py = realheight - realheight*(v / max_v);
                    //alert(py);
                    points.push({"x":px,"y":py});
                }

                //绘制坐标图形
                for(var i in points){
                    var p = points[i];
                    context.beginPath();
                    context.fillStyle="green";
                    context.fillRect(p.x,p.y,15,realheight-p.y);

                    context.fill();
                }
                //添加文字
                for(var i in points)
                {  var p = points[i];
                    context.beginPath();
                    context.fillStyle="black";
                    context.fillText(data[i], p.x + 1, p.y - 15);
                    context.fillText(xinforma[i],p.x + 1,realheight+12);
                    context.fillText('天数',realwidth,realheight+12);
                    context.fillText('人数',0,10);
                }
            },false);
        })();

    </script>


    <form  align="center" action="" method="get">

        <input type="text" name="country" align="center">
        <input type="submit"  align="center" value="检索">
    </form>
<table align="center" border="1">

    <tr align="center">
        <td align="center">国家</td>
        <td align="center">州</td>
        <td align="center">当前病例</td>
        <td align="center">新增病例</td>
    </tr>
    <tr align="center" th:each="regionStats:${allData}">
        <td align="center" th:text="${regionStats.country}">
        <td align="center" th:text="${regionStats.state}">
        <td align="center" th:text="${regionStats.diffFromPrevDay}">
        <td align="center" th:text="${regionStats.latestTotalCases}">
    </td></tr>
</table>
</body>

</body>
</html>